<template>
  <view class="preson-item">
    <view class="preson-item-flex" @click="handleShowActionSheet">
      <view>
        <TImage
          :src="data?.avatar"
          width="128rpx"
          height="128rpx"
          borderRadius="16rpx"
          error-img-type="person"
        ></TImage>
      </view>
      <view class="info">
        <view class="name-position">
          <view class="name-box">
            <text class="name text-overflow-1">{{ data?.personName }}</text>
            <CustomTag
              v-if="data?.memberLevelName"
              :text="data?.memberLevelName"
              background-color="linear-gradient(90deg, #FDEDC7 0.12%, #F7D9A2 100%)"
              color="#EA5E0E"
              padding="2rpx 12rpx"
            ></CustomTag>
          </view>
          <view v-if="data?.signStatus === SignStatusEnum.YES_SIGN" class="signed-in">已签到</view>
          <view v-if="data?.approvalStatus === ApprovalStatusEnum.CANCEL" class="cancel">
            已取消
          </view>
          <view v-if="data?.approvalStatus === ApprovalStatusEnum.CANCELING" class="canceling">
            待审核
          </view>
        </view>
        <view class="company-position">
          <text class="company" style="color: #333">{{ data?.companyName }}</text>
          <text class="position">{{ data?.companyPosition }}</text>
        </view>
        <view class="time">
          <text class="time-name">{{ time.title }}</text>
          <text class="time-value">{{ time.value }}</text>
        </view>
      </view>
    </view>
    <view
      class="btns"
      v-if="
        (data?.isAuditAuth === IsAuditAuthEnum.YES &&
          data?.approvalStatus === ApprovalStatusEnum.UNDERREVIEW) ||
        data?.approvalStatus === ApprovalStatusEnum.CANCELING
      "
    >
      <view class="call" @click="makePhoneCall">联系TA</view>
      <view class="examine" @click.stop="emits('click')">审核</view>
    </view>
  </view>

  <ShowModal
    v-model="modalVisible"
    title="取消报名"
    content-width="100%"
    cancel-text="暂不取消"
    confirm-text="申请取消"
    confirm-color="#EA5E0E"
    :confirm-auto-close="false"
    @confirm="handleCancelRegister"
  >
    <template #content>
      <view class="pa-20" style="width: 100%">
        <view class="fz-14 mb-16" style="color: #969799">
          <text>取消后，如有支付的活动费用将原路退回。</text>
        </view>
        <view style="background-color: #f2f3f5">
          <UniEasyinput v-model="cancelRemark" type="textarea" placeholder="请说明取消报名原因" />
        </view>
      </view>
    </template>
  </ShowModal>
</template>
<script setup lang="ts">
  import TImage from '@/components/TImage/index.vue';
  import CustomTag from '@/components/CustomTag/index.vue';
  import { computed, ref, type PropType } from 'vue';
  import type { IActivityRegister } from '@/api/activity/types';
  import { SignStatusEnum, IsAuditAuthEnum, ApprovalStatusEnum } from '@/enums/activityStatusEnum';
  import { navigateTo } from '@/router';
  import ShowModal from '@/components/ShowModal/index.vue';
  import UniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue';
  import { Toast } from '@/utils';
  import { activityManagerCancelSysRegistration } from '@/api/activity';
  import dayjs from 'dayjs';

  const props = defineProps({
    data: {
      type: Object as PropType<IActivityRegister>,
    },
    currentTab: {
      type: Number,
      default: 0,
    },
  });

  const emits = defineEmits(['click', 'refresh', 'showPrinterPopup']);

  function handleShowActionSheet() {
    if (!props.data) return;
    if (props.data?.approvalStatus === ApprovalStatusEnum.UNDERREVIEW) return;
    const { approvalStatus } = props.data;
    if (approvalStatus === ApprovalStatusEnum.CANCEL) {
      uni.showActionSheet({
        itemList: ['查看报名详情', '联系ta'],
        success: (res) => {
          switch (res.tapIndex) {
            case 0:
              toRegisterDetail();
              break;
            case 1:
              // 联系ta
              makePhoneCall();
              break;
          }
        },
      });
      return;
    }
    uni.showActionSheet({
      itemList: ['查看报名详情', '联系ta', '打印胸卡', '取消报名'],
      success: (res) => {
        switch (res.tapIndex) {
          case 0:
            toRegisterDetail();
            break;
          case 1:
            // 联系ta
            makePhoneCall();
            break;
          case 2:
            // 打印胸卡
            emits('showPrinterPopup');
          case 3:
            modalVisible.value = true;
            break;
        }
      },
    });
  }

  function makePhoneCall() {
    if (props.data?.personTel) {
      wx.makePhoneCall({
        phoneNumber: props.data?.personTel,
      });
    } else {
      Toast('暂无联系方式');
    }
  }

  const modalVisible = ref(false);
  const cancelRemark = ref<string>('');
  /** 取消报名 */
  function handleCancelRegister() {
    if (!cancelRemark.value) return Toast('请说明取消报名原因');
    activityManagerCancelSysRegistration({
      registerId: props.data?.id as number,
      remarks: cancelRemark.value,
    })
      .then(() => {
        emits('refresh');
        Toast('取消成功');
      })
      .finally(() => (modalVisible.value = false));
  }

  function toRegisterDetail() {
    navigateTo({
      name: 'activityManageRegisterDetail',
      options: {
        registerId: props.data?.id as number,
        callback: () => emits('refresh'),
      },
    });
  }

  const time = computed(() => {
    if (props.currentTab === 0)
      return {
        title: '申请时间：',
        value: dayjs(props.data?.createTime).format('MM-DD HH:mm'),
      };
    if (props.currentTab === 1) {
      return {
        title: '申请时间：',
        value: dayjs(props.data?.cancelTime).format('MM-DD HH:mm'),
      };
    }
    return {};
  });
</script>
<style lang="scss" scoped>
  .preson-item {
    background-color: #ffffff;
    padding: 24rpx;
    border-radius: 16rpx;

    .preson-item-flex {
      display: flex;
      gap: 16rpx;
      .info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8rpx;
        .name-position {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 16rpx;
          .name-box {
            display: flex;
            gap: 16rpx;
            .name {
              color: #333;
              font-size: 32rpx;
              font-weight: 700;
              line-height: 48rpx;
            }
          }
          .signed-in,
          .cancel,
          .canceling {
            padding: 2rpx 8rpx;
            border-radius: 2px;
            font-size: 20rpx;
            font-weight: 400;
            line-height: 28rpx;
            border-radius: 2px;
            white-space: nowrap;
          }

          .signed-in {
            color: #2878ff;
            border: 1rpx solid #2878ff;
          }
          .cancel {
            background: #f2f3f5;
            color: #333;
          }
          .canceling {
            background: #d0f7ff;
            color: #2878ff;
          }
        }
        .company-position {
          display: flex;
          align-items: center;
          gap: 16rpx;
          flex-wrap: wrap;
          color: #969799;
          font-size: 24rpx;
          font-weight: 400;
          line-height: 32rpx;
          .position {
            white-space: nowrap;
          }
        }
        .time {
          display: flex;
          color: #969799;
          font-size: 24rpx;
          font-weight: 400;
          line-height: 32rpx;
        }
      }

      .opration-status {
        display: flex;
        justify-content: center;
      }
    }
    .btns {
      display: flex;
      justify-content: flex-end;
      gap: 24rpx;
      .call {
        border-radius: 32rpx;
        background: #f2f3f5;
        padding: 12rpx 32rpx;
        color: #333333;
        font-size: 28rpx;
        line-height: 40rpx;
        width: fit-content;
      }
      .examine {
        border-radius: 32rpx;
        background: #2878ff;
        padding: 12rpx 32rpx;
        color: #fff;
        font-size: 28rpx;
        line-height: 40rpx;
        width: fit-content;
      }
    }

    .belong-to {
      color: #969799;
      font-size: 24rpx;
      font-weight: 400;
      line-height: 32rpx;
      margin-top: 24rpx;
    }
  }
</style>
